#highlights-wrapper{
    width: 80vw;
    display: flex;
    flex-direction: column;
}

#highlights-wrapper-mobile {
    width: 80vw;
    flex-direction: column;
}



.highlights-text-left, .highlights-text-right {
    height: 60vh;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-content: space-between;
    margin: 3vh 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.highlight-desc, .highlight-img{
    box-shadow: rgba(8, 4, 29, 0.926) 1px 1px 10px;
}

.highlight-desc::-webkit-scrollbar, .highlight-desc::-webkit-scrollbar-button { display: none; }


.highlight-desc {
    background-color: white;
    border-radius: 2vh;
    height: 100%;
    flex: 1;
    padding: 1vw;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
}

.highlight-desc h3 {
    color: rgba(33, 15, 63, 1);
    display: inline-block;
    margin: .5vh 0 2.5vh 1vw;
}

.highlight-text-div {
    background-color: rgb(223, 228, 233);
    border-radius: 2vh;
    box-sizing: border-box;
    height: auto;
    padding: 1vw;
}

.highlight-text-div p {
    color:rgba(33, 15, 63, 0.629);
    margin-top: 0;
}

.highlight-img {
    background-size: cover;
    flex: 2;
    border-radius: 2vh;
}

.highlight-spacer {
    flex: .1;
}
.highlights-on-right{
    position: relative; /* Needed for the 'left' property to work relative to its normal position */
    animation-name: slideFromLeft;
    animation-duration: 2s;
    animation-fill-mode: forwards; /* Stays at the end point of the animation */
}

@keyframes slideFromLeft {
    0% {
        left: -100%; /* Start off-screen */
    }
    100% {
        left: 0; /* End at the final position */
    }
}
.highlights-on-left{
    position: relative; /* Needed for the 'left' property to work relative to its normal position */
    animation-name: slideFromRight;
    animation-duration: 2s;
    animation-fill-mode: forwards; /* Stays at the end point of the animation */
}

@keyframes slideFromRight {
    0% {
        right: -100%; /* Start off-screen */
    }
    100% {
        right: 0; /* End at the final position */
    }
}



@media screen and (orientation: portrait){
    .highlights-text-left, .highlights-text-right {
    height: 60vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    }

    #highlights-wrapper {
        display: none;
    }

    .bg {
        margin-bottom: -5em;
    }

    .highlight-desc {
    padding: 3vw;
    }

    .highlight-img {
        flex: 1;
    }

    #highlights-wrapper-mobile {
    display: flex;
}
}